<template>
  <div>
    <MainSearchDetail v-model="visible"
                      :title="title">
      <div class="search-left">
        <div class="top flex j-between">
          <div class="left border-spot p-20 m-r-30">
            <img :src="detail.fileurl ? detail.fileurl : gardenImg">
            <!-- <span class="status">
              <Icon custom="i-icon icon-shengchangjilu"
                    size="16" />
              {{detail.growthsituation || '--'}}
            </span> -->
          </div>
          <div class="right">
            <div class="tree-msg">
              <div class="fs-24 m-b-10">树种信息</div>
              <div class="flex j-between">
                <div class="border-spot m-r-20 min-w-200">
                  <Echarts width="200px"
                           height="209px"
                           key="szxx"
                           ref="szEcharts"
                           :options="szOptions"></Echarts>
                </div>
                <div class="tree-seeds noScroll">
                  <div class="tree-seeds-item"
                       v-for="(item,index) in parkDetail.treespecList"
                       :key="index">
                    <div class="item-name">
                      <img v-if="item.iconid"
                           :src="getIconUrl(item)">
                      {{item.maintree}}
                    </div>
                    <div class="item-cont">
                      <p>
                        <label>数量</label>
                        <span><span>{{item.treenum}}</span>棵</span>
                      </p>
                      <p>
                        <label>规格(胸径)</label>
                        <span><span>{{item.specsName}}</span>CM</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div>
              <div class="fs-24 m-b-15 m-t-30">实时状态</div>
              <div class="status border-spot flex j-between">
                <ul class="left-bottom-ul">
                  <li>
                    <div class="left-bottom-ul-li-msg flex a-center">
                      <p>生长势(强)：</p>
                      <span>
                        <span>{{detail.others && detail.others[0].strongGrowingTree && detail.others[0].strongGrowingTree *  detail.others[0].totalCount > 0 ? detail.others[0].strongGrowingTree : 0}}</span>/{{detail.others && detail.others[0].totalCount && detail.others[0].strongGrowingTree *  detail.others[0].totalCount > 0 ? detail.others[0].totalCount : 0}}
                      </span>
                    </div>
                    <div class="left-bottom-ul-li-cont">
                      <i-circle :percent="parkDetail.szsNum"
                                :size="40"
                                :stroke-width="14"
                                stroke-linecap="square"
                                stroke-color="#25BA95"
                                :trail-width="3"
                                trail-color="#25BA95"></i-circle>
                    </div>
                  </li>
                  <li>
                    <div class="left-bottom-ul-li-msg flex a-center">
                      <p>健康(无病害)：</p>
                      <span>
                        <span>{{detail.others && detail.others[0].strongGrowingTree && detail.others[0].strongGrowingTree * detail.others[0].totalCount > 0 ? detail.others[0].healthyTrees : 0}}</span>/{{detail.others && detail.others[0].totalCount && detail.others[0].strongGrowingTree * detail.others[0].totalCount > 0 ? detail.others[0].totalCount : 0}}
                      </span>
                    </div>
                    <div class="left-bottom-ul-li-cont">
                      <i-circle :percent="parkDetail.jkNum"
                                :size="40"
                                :stroke-width="14"
                                stroke-linecap="square"
                                stroke-color="#25BA95"
                                :trail-width="3"
                                trail-color="#25BA95"></i-circle>
                    </div>
                  </li>
                </ul>
                <Echarts width="300px"
                         height="250px"
                         key="szqk"
                         :options="ylOptions"
                         class="echarts"
                         ref="ylOptionsRef"></Echarts>
                <div class="unit">单位：棵</div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom m-t-20 m-b-20 flex">
          <div class="left">
            <div class="title fs-24 border-spot">园林资料</div>
            <div class="p-l-20 p-r-20 border-spot fs-18 p-t-30 p-b-30">
              <ul class="list flex flex-wrap m-b-20">
                <li class="flex w-p-50">
                  <p>树木类型：</p>
                  <span>{{detail.bigTypeName || '--'}}{{detail.smallTypeName || ''}}</span>
                </li>
                <li class="flex w-p-50">
                  <p class="min-w-100">所属机构：</p>
                  <span>{{detail.departName || '--'}}</span>
                </li>
                <li class="flex w-p-50">
                  <p>责任人：</p>
                  <span>{{detail.principal || '--'}}</span>
                </li>
                <li class="flex w-p-50">
                  <p class="min-w-100">维护单位：</p>
                  <span>{{detail.maintain || '--'}}</span>
                </li>
              </ul>
              <ul class="list m-b-30">
                <li class="flex m-b-10">
                  <p>设施状态：</p>
                  <span>{{detail.status || '- -'}}</span>
                </li>
                <li class="flex">
                  <p class="min-w-100">园林地址：</p>
                  <span>{{detail.site || '--'}}</span>
                </li>
              </ul>
              <div style="line-height:36px">
                {{detail.others ? detail.others[0].introduction : ''}}
              </div>
            </div>
            <div class="btn">
              <div @click.stop="onClickSkill">技术资料</div>
              <div :style="{'cursor':detail.videoonlinestatus == 0 ? 'pointer' : 'not-allowed','color':detail.videoonlinestatus == 0 ? '#eeeeee' : '#84919e'}"
                   @click.stop="onClickVideo">
                <Icon custom="i-icon icon-jiankong11"
                      size="22" />
                摄像头
              </div>
            </div>
          </div>
          <div class="right">
            <div class="border-bottom-spot fs-24 p-b-30">
              绿化信息
            </div>
            <div class="right-green">
              <i-circle :percent="parkDetail.lhlNum"
                        :size="70"
                        :stroke-width="8"
                        :trail-width="8"
                        :stroke-color="['#77AA4B','#29BA92']">
                <span class="right-green-box-circle-count">{{parkDetail.lhlNum}}%</span>
              </i-circle>
              <div class="right-green-text m-l-20">
                <p>绿化率</p>
                <span>现有绿化面积占比</span>
              </div>
              <div class="right-green-count m-l-40">
                <span>{{detail.others ? detail.others[0].greenArea : '0'}}</span> km²
              </div>
            </div>
            <div class="right-area">
              <div class="right-area-item">
                <span>区域总面积：</span>
                <span>{{detail.others ? detail.others[0].totalArea : '0'}}</span>km²
              </div>
              <div class="right-area-item">
                <span>规划绿地面积：</span>
                <span>{{detail.others ? detail.others[0].plannedGreenArea : '0'}}</span>km²
              </div>
            </div>
            <div class="right-person">
              <div class="right-person-item">
                <img src="../../../../assets/main/greeWorker.png">
                <div class="right-person-item-text">
                  <p>养护工人</p>
                  <span>{{detail.others ? detail.others[0].maintenanceWorkers : '0'}}</span>
                </div>
              </div>
              <div class="right-person-item">
                <img src="../../../../assets/main/greeperson.png">
                <div class="right-person-item-text">
                  <p>保洁人员</p>
                  <span>{{detail.others ? detail.others[0].housekeeper : '0'}}</span>
                </div>
              </div>
              <div class="right-person-item">
                <img src="../../../../assets/main/greeCar.png">
                <div class="right-person-item-text">
                  <p>养护车辆</p>
                  <span>{{detail.others ? detail.others[0].maintainCar : '0'}}</span>
                </div>
              </div>
              <div class="right-person-item">
                <img src="../../../../assets/main/greeequipment.png">
                <div class="right-person-item-text">
                  <p>物料设备</p>
                  <span>{{detail.others ? detail.others[0].material : '0'}}</span>
                </div>
              </div>
            </div>
            <div class="border-bottom-spot fs-24 p-b-20 m-b-30">养护记录</div>
            <div class="flex fs-18">
              <p style="color:#999999">养护周期：</p>
              <span>{{detail.others ? detail.others[0].maintenanceCycleGardens + '一次' : '- -'}}</span>
            </div>
            <ul class="work-list">
              <li class="work-list-item"
                  v-for="(item,index) in workRecordArr"
                  :key="index">
                <div class="time">{{item.createTime}}</div>
                <div class="name">{{item.createName}}</div>
                <div class="cont">
                  {{item.title + ' | '}}{{item.des}}
                </div>
                <div class="multimedia">
                  <div class="item video-item"
                       v-previewVideo="item.videourl"
                       v-if="item.videourl">
                    <Icon custom="i-icon icon-bofang"
                          size="25"
                          color='#fff'></Icon>
                  </div>
                  <div class="item"
                       v-for="(items,indexs) in item.imgurls"
                       :key="indexs">
                    <el-image :src="items"
                              fit="cover"
                              :preview-src-list="[items]"
                              class="detail-top-img"
                              v-if="item.imgurls.length != 0">
                    </el-image>
                  </div>
                </div>
              </li>
              <infinite-loading @infinite="getGardenMaintainPageList"
                                :distance="10"
                                ref="infiniteLoading">
                <span slot="no-results">
                  暂无更多养护记录
                </span>
                <span slot="no-more">
                  暂无更多养护记录
                </span>
              </infinite-loading>
            </ul>
          </div>
        </div>
      </div>
    </MainSearchDetail>

    <Modal v-model="skillVisible"
           footer-hide
           title="技术资料"
           width="1024">
      <div class="skill noScroll">
        <div class="skill-title">
          {{technical.name}}
        </div>
        <div class="skill-tip">
          {{technical.maintain}} | {{technical.sphereApplication}}
        </div>
        <div class="skill-cont">
          {{technical.cont}}
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import bus from '@/utils/bus'
import MainSearchDetail from "./MainSearchDetail.vue";
import MyTreeSelect from '@/components/common/MyTreeSelect';
import Echarts from '../../../common/Echarts';
import { formatDate } from '@/utils/dateRangUtil';
import InfiniteLoading from 'vue-infinite-loading';
export default {
  components: {
    MainSearchDetail,
    MyTreeSelect,
    Echarts,
    InfiniteLoading
  },
  data () {
    return {
      colorList: [
        '#66FF00',
        '#66FF99',
        '#33FF00',
        '#33FF99',
        '#00FF00',
        '#00FF33',
        '#00FF88',
        '#66FF66',
        '#FFFF99',
        '#CCFF99',
        '#99FF99',
        '#00FF55',
        '#11FF99',
        '#00FF66',
        '#CCFF66',
        '#99FF66',
        '#66FF33',
        '#33FF33',
      ],
      visible: false,
      dataId: '',
      title: '',
      detail: {},
      gardenImg: require('../../../../assets/demo/garden.png'),
      identifyingArr: [
        {
          id: 'baiyang',
          name: require('../../../../assets/common/gardens/baiyang.png')
        },
        {
          id: 'guohuai',
          name: require('../../../../assets/common/gardens/guohuai.png')
        },
        {
          id: 'hehuan',
          name: require('../../../../assets/common/gardens/hehuan.png')
        },
        {
          id: 'lishu',
          name: require('../../../../assets/common/gardens/lishu.png')
        },
        {
          id: 'luanshu',
          name: require('../../../../assets/common/gardens/luanshu.png')
        },
        {
          id: 'nvzhen',
          name: require('../../../../assets/common/gardens/nvzhen.png')
        },
        {
          id: 'other',
          name: require('../../../../assets/common/gardens/other.png')
        },
        {
          id: 'wujiaofeng',
          name: require('../../../../assets/common/gardens/wujiaofeng.png')
        },
        {
          id: 'wutong',
          name: require('../../../../assets/common/gardens/wutong.png')
        },
        {
          id: 'yinghua',
          name: require('../../../../assets/common/gardens/yinghua.png')
        },
        {
          id: 'yinxing',
          name: require('../../../../assets/common/gardens/yinxing.png')
        },
      ],
      // 技术资料
      skillVisible: false,
      technical: {},
      // 问题整改
      issueVisible: false,
      // 问题整改 tabs
      issueTabsIndex: 0,
      assignTree: '',
      assignTreeData: [
        {
          title: '山东蜻蜓数字科技有限公司',
          value: 1,
          children: [{
            title: '奎文区',
            value: 11,
            children: [{
              title: '山东蜻蜓数字科技有限公司',
              value: 111,
              children: [{
                title: '保洁队',
                value: 1111
              }, {
                title: '公厕队',
                value: 1112
              }, {
                title: '运输队',
                value: 1113
              }, {
                title: '建筑队',
                value: 1114
              }, {
                title: '园林队',
                value: 1115
              }]
            }]
          }]
        }
      ],
      issueTypeValue: 1,
      issueTypeList: [
        {
          id: 1,
          name: '全部'
        },
        {
          id: 2,
          name: '堆弃杂物'
        },
        {
          id: 3,
          name: '垃圾污染'
        },
        {
          id: 4,
          name: '水域污染'
        },
        {
          id: 5,
          name: '排水堵塞'
        },
        {
          id: 6,
          name: '景观污染损坏'
        },
        {
          id: 7,
          name: '设施污染损坏'
        }
      ],
      patrolColumns: [
        {
          title: '问题类型',
          key: 'type'
        },
        {
          title: '上报时间',
          key: 'time'
        },
        {
          title: '问题地点',
          key: 'site'
        },
        {
          title: '问题描述',
          key: 'desc'
        }
      ],
      patrolData: [],
      ylOptions: {
        title: {
          text: '树龄分布',
          textStyle: {
            color: '#34D7AC',
            fontSize: 14
          }
        },
        tooltip: {},
        radar: {
          indicator: [
            { name: '小于3年' },
            { name: '3~5年' },
            { name: '5~10年' },
            { name: '10~20年' },
            { name: '20年以上' },
          ]
        },
        series: [
          {
            name: '生长情况',
            type: 'radar',
            data: []
          }
        ]
      },
      greenOptions: {
        xAxis: {
          show: true,
          type: 'category',
          interval: 0,
          data: ['2016', '2017', '2018', '2019', '2020']
        },
        yAxis: {
          show: false,
          type: 'value',
          splitLine: {
            show: false
          }
        },
        series: [{
          type: 'line',
          symbol: 'none',
          smooth: true,
          data: [0, 60, 80, 60, 140],
        }],
        color: ['#8EB45E'],
        textStyle: {
          color: '#fff'
        }
      },
      // 树种echarts
      szOptions: {
        backgroundColor: 'transparent',
        tooltip: {},
        animationDurationUpdate: function (idx) {
          // 越往后的数据延迟越大
          return idx * 100;
        },
        animationEasingUpdate: 'bounceIn',
        color: ['#fff', '#fff', '#fff'],
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 100,
              edgeLength: 10,
            },
            roam: true,
            label: {
              normal: {
                show: true,
              },
            },
            data: [],
          },
        ],
      },
      // 获取树种列表，生长势、健康、绿化率百分比
      parkDetail: {},
      // 日志记录
      workRecordArr: [],
      pageNum: 1,
      pageSize: 3,
      totalPage: 0
    }
  },
  watch: {
    dataId (newVal) {
      if (newVal) {
        this.getDetail()
        this.getParkDetail()
        this.getGardenMaintainList()
      }
    },
    visible (newVal) {
      if (!newVal) {
        this.dataId = ''
        this.pageNum = 1
        this.totalPage = 0
        this.workRecordArr = []
        this.parkDetail = {}
        this.szOptions.series[0].data = []
      }
    }
  },
  computed: {
  },
  mounted () {
    this.init()
  },
  methods: {
    getIconUrl (items) {
      return this.identifyingArr.find(item => item.id === items.iconid).name
    },
    init () {
      bus.$on('showMainSearchGardenDetail', data => {
        this.dataId = data.id
        this.title = data.title
        this.visible = true
      })
    },
    getDetail () {
      this.$store.dispatch('getFacilityDetail', this.dataId).then(res => {
        this.detail = res
        if (this.detail.status == 0) {
          this.detail.status = '正常'
        } else if (this.detail.status == 1) {
          this.detail.status = '废弃'
        } else if (this.detail.status == 2) {
          this.detail.status = '维修'
        } else if (this.detail.status == 3) {
          this.detail.status = '拆除'
        } else if (this.detail.status == 4) {
          this.detail.status = '暂停'
        }
      })
    },
    // 获取树种列表，生长势、健康、绿化率百分比
    getParkDetail () {
      this.$http.getParkTreeDetail({ id: this.dataId }).then((res) => {
        if (res.code === 200) {
          this.parkDetail = res.result
          let sizeArr = [110, 100, 90, 80, 70, 60, 50, 40, 30, 20]
          // 树种图表
          this.szOptions.series[0].data = this.parkDetail.treespecList.map((item, index) => {
            let data = {
              name: item.maintree,
              value: item.treenum,
              // symbolSize: item.treenum,
              draggable: true,
              itemStyle: {
                normal: {
                  color: this.colorList[this.randomNum(0, 17)],
                },
              },
            }
            // 图表球球的大小
            if (this.parkDetail.treespecList.length == 1) {
              data.symbolSize = sizeArr[6]
            } else if (this.parkDetail.treespecList.length == 2) {
              data.symbolSize = sizeArr[index + 5]
            } else if (this.parkDetail.treespecList.length == 3) {
              data.symbolSize = sizeArr[index + 4]
            } else if (this.parkDetail.treespecList.length == 4) {
              data.symbolSize = sizeArr[index + 3]
            } else if (this.parkDetail.treespecList.length == 5) {
              data.symbolSize = sizeArr[index + 2]
            } else if (this.parkDetail.treespecList.length == 6) {
              data.symbolSize = sizeArr[index + 1]
            } else if (this.parkDetail.treespecList.length == 7) {
              data.symbolSize = sizeArr[index]
            } else if (this.parkDetail.treespecList.length == 8) {
              data.symbolSize = sizeArr[index]
            } else if (this.parkDetail.treespecList.length == 9) {
              data.symbolSize = sizeArr[index]
            } else if (this.parkDetail.treespecList.length == 10) {
              data.symbolSize = sizeArr[index]
            }
            return data
          })
          this.$refs.szEcharts.init()
          // 树龄图表最大值
          let arr = [0, 0, 0, 0, 0]
          let max = 0
          this.parkDetail.bTables.forEach(item => {
            if (parseInt(item.time) < 3) {
              arr[0] = arr[0] + item.data
            } else if (item.time >= 3 && item.time < 5) {
              arr[1] = arr[1] + item.data
            } else if (item.time >= 5 && item.time < 10) {
              arr[2] = arr[2] + item.data
            } else if (item.time >= 10 && item.time < 20) {
              arr[3] = arr[3] + item.data
            } else {
              arr[4] = arr[4] + item.data
            }
          })
          arr.forEach(item => {
            if (item > max) {
              max = item
            }
          })
          this.ylOptions.radar.indicator.forEach(item => {
            item.max = max
          });
          // 树龄分布数据
          this.ylOptions.series[0].data = [{
            value: arr,
            name: '生长情况'
          }]
          this.$refs.ylOptionsRef.init()
        }
      })
    },
    // 随机数
    randomNum (minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    // 获取养护记录
    getGardenMaintainList () {
      let params = {
        treeId: this.dataId,
        page: this.pageNum,
        size: this.pageSize
      }
      this.$http.getMapTreeMaintainList(params).then(res => {
        if (res.code == 200) {
          this.workRecordArr = res.result.treeMaintains.map(item => {
            item.imgurls = item.imgurls.split(',').filter(items => items)
            return item
          })
          this.totalPage = res.result.pages
          this.pageNum++
        }
      })
    },
    // 获取养护记录分页列表
    getGardenMaintainPageList ($state) {
      if (this.pageNum >= this.totalPage) {
        $state.complete()
        return
      }
      let params = {
        treeId: this.dataId,
        page: this.pageNum,
        size: this.pageSize
      }
      this.$http.getMapTreeMaintainList(params).then(res => {
        if (res.code == 200) {
          let arr = res.result.treeMaintains.map(item => {
            item.imgurls = item.imgurls.split(',').filter(items => items)
            return item
          })
          this.workRecordArr = this.workRecordArr.concat(arr)
          this.pageNum++
          $state.loaded()
        }
      })
    },
    // 摄像头
    onClickVideo () {
      if (this.detail.videoonlinestatus == 1) return
      let params = {
        equipcode: this.detail.equipcode,
        eqptype: this.detail.eqptype,
        details: this.detail.channels,
      }
      bus.$emit('showPlayVideoModal', params)
    },
    // 技术资料
    onClickSkill () {
      this.skillVisible = true
      this.$store.dispatch('getConserveDetail', this.detail.others[0].technical).then(res => {
        this.technical = res
      })
    },
    // 问题整改
    onClickIssue () {
      this.issueVisible = true
    },
    // 问题整改 tabs
    onClickIssueTabs (i) {
      this.issueTabsIndex = i
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/scss/iviewCssReset/modal";
::v-deep {
  .ivu-modal-body {
    padding: 0;
  }
}
.search-left {
  color: #ffffff;
  .top {
    .left {
      width: 590px;
      height: 620px;
      img {
        width: 550px;
        height: 580px;
        object-fit: cover;
      }
      .status {
        position: absolute;
        right: -16px;
        bottom: -5px;
        display: block;
        width: 85px;
        height: 34px;
        text-align: center;
        line-height: 34px;
        background: url(../../../../assets/main/ancient-text-bac.png) no-repeat;
        font-size: 16px;
        font-weight: bold;
        color: #fff;
        z-index: 1;
      }
    }
    .right {
      .tree-msg {
        width: 570px;
        .tree-seeds {
          width: 100%;
          height: 209px;
          overflow: auto;
          padding: 22px;
          border: 1px solid rgba(255, 255, 255, 0.2);

          .tree-seeds-item {
            margin-bottom: 20px;

            .item-name {
              font-size: 16px;
              color: #eee;
              font-weight: 500;

              img {
                width: 22px;
                height: 22px;
                margin-right: 8px;
                cursor: default;
              }
            }

            .item-cont {
              display: flex;
              justify-content: space-between;

              p {
                display: flex;
                align-items: center;

                label {
                  color: #999;
                  padding-right: 6px;
                }

                span {
                  color: #eee;
                  display: flex;
                  align-items: center;
                  span {
                    font-size: 18px;
                  }
                }
              }
            }
          }
        }
      }
      .status {
        width: 570px;
        height: 320px;
        padding: 30px;
        position: relative;

        .left-bottom-ul {
          padding: 24px 0 10px 0;
          li {
            flex: 1;
            margin-bottom: 10px;
            .left-bottom-ul-li-msg {
              p {
                color: rgba(238, 238, 238, 0.65);
              }
              span {
                color: #eee;
                font-size: 18px;
                span {
                  font-size: 24px;
                }
              }
            }
            .left-bottom-ul-li-cont {
              width: 40px;
              height: 40px;
              border-radius: 50%;
            }
          }
        }
        .echarts {
          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%);
        }
        .unit {
          position: absolute;
          top: 20px;
          right: 20px;
          color: #34d7ac;
        }
      }
    }
  }
  .bottom {
    .left {
      width: 590px;
      margin-right: 35px;
      .title {
        line-height: 65px;
        padding-left: 20px;
        border-bottom: 0;
      }
      .title::after {
        height: 0px;
      }

      .btn {
        display: flex;
        flex-wrap: wrap;
        padding-top: 20px;
        justify-content: center;
        div {
          width: 116px;
          height: 36px;
          line-height: 36px;
          text-align: center;
          background: #095844;
          color: #fff;
          border: 1px solid #15876a;
          margin-right: 46px;
          margin-bottom: 20px;
          cursor: pointer;
        }
      }
    }
    .right {
      width: 575px;
      .right-green {
        margin-top: 24px;
        display: flex;
        align-items: center;
        padding: 10px 0;
        .right-green-box-circle-count {
          font-size: 15px;
          color: #dcdcdc;
        }

        .right-green-text {
          p {
            color: #eee;
            margin-bottom: 16px;
            font-size: 18px;
          }

          span {
            color: rgba(255, 255, 255, 0.5);
          }
        }

        .right-green-count {
          color: #eee;

          span {
            font-size: 36px;
          }
        }
      }
      .right-area {
        display: flex;
        flex-wrap: wrap;
        font-size: 16px;

        .right-area-item {
          width: 50%;
          color: #eee;
          // display: flex;
          // align-items: flex-end;
          span:first-child {
            color: #999999;
          }

          span:last-child {
            font-size: 26px;
          }
        }
      }
      .right-person {
        display: flex;
        flex-wrap: wrap;
        // padding: 40px 10px 0 10px;
        padding-top: 10px;

        .right-person-item {
          width: 50%;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-bottom: 20px;

          img {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            cursor: default;
          }

          .right-person-item-text {
            display: flex;
            align-items: center;

            p {
              font-size: 16px;
              color: rgba(255, 255, 255, 0.7);
              margin-right: 10px;
            }

            span {
              color: #eee;
              font-size: 20px;
            }
          }
        }
      }
      .work-list {
        max-height: 350px;
        overflow-y: auto;
        .work-list-item {
          margin-top: 30px;
          .time {
            font-size: 18px;
            color: #fff;
            margin-bottom: 10px;
          }
          .name {
            font-size: 16px;
            color: #999999;
          }
          .cont {
            font-size: 16px;
            color: #999999;
            margin-bottom: 10px;
          }
          .multimedia {
            display: flex;
            flex-wrap: wrap;
            .item {
              width: 32%;
              margin-right: 2%;
              img {
                width: 100%;
              }
            }
            .item:nth-child(3n) {
              margin-right: 0;
            }
            .video-item {
              position: relative;
              background: #797979;
              i {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
        }
      }
    }
  }
}

// 边框的点
.border-spot {
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.border-spot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}
.border-spot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}
.border-bottom-spot {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
}
.border-bottom-spot::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  box-sizing: border-box;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
  background: rgba(255, 255, 255, 0.1);
}
// 列表
.list {
  font-size: 18px;
  p {
    color: #999999;
  }
  span {
    color: #ffffff;
  }
}

.skill {
  background: #3a3c3e;
  padding: 25px 54px;
  box-sizing: border-box;
  max-height: 600px;
  overflow-y: auto;

  .skill-title {
    text-align: center;
    font-size: 24px;
    color: #f1f0e9;
    line-height: 32px;
  }

  .skill-tip {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(241, 240, 233, 0.4);
    line-height: 32px;
  }

  .skill-cont {
    color: #fff;
    word-break: break-all;
  }
}

.issue {
  .issue-tabs {
    display: flex;
    padding: 0 14px;

    li {
      height: 39px;
      line-height: 39px;
      box-sizing: border-box;
      margin: 0 15px;
      color: #fff;
      cursor: pointer;
    }

    .current {
      color: #25bb96;
      border-bottom: 2px solid #25bb96;
    }
  }

  .issue-title {
    display: flex;
    background: #3a3c3e;
    padding: 13px 0;

    .issue-title-item {
      display: flex;
      align-items: center;
      margin-right: 6px;
      vertical-align: top;

      span {
        text-align: right;
        vertical-align: middle;
        // float: left;
        font-size: 14px;
        color: #515a6e;
        line-height: 1;
        padding: 10px 12px 10px 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        color: rgba(255, 255, 255, 0.65);
        padding-left: 20px;
      }
    }

    .issue-title-item:last-child {
      width: 15%;
      justify-content: flex-end;
      color: #ffffff;

      div {
        width: 60px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
      }

      div:first-child {
        background: #25bb96;
        margin-right: 5px;
      }

      div:last-child {
        border: 1px solid rgba(230, 230, 230, 0.4);
      }
    }
  }

  .issue-page {
    height: 44px;
    line-height: 44px;
    text-align: center;
  }
}
</style>
